<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :show-close="false"
      @open="handleopen"
    >
      <div class="picture">
        <img class="big" :src="big" alt="" />
        <img
          :style="{ top: y + 'px', left: x + 'px' }"
          class="small"
          :src="small"
          alt=""
        />
      </div>
      <div class="button">
        <el-slider
          v-model="x"
          :show-tooltip="false"
          :max="imgWidth"
          @change="handleChangeX"
        ></el-slider>
        <p>
          拖动滑块完成拼图
        </p>
      </div>
      <span slot="footer" class="dialog-footer"> </span>
    </el-dialog>
  </div>
</template>
<script>
const imgWidth = 450 - 50;

export default {
  name: "Captcha",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    big: {
      type: String
    },
    small: {
      type: String
    },
    y: {
      type: Number
    }
  },
  data() {
    return {
      imgWidth: imgWidth,
      x: 0
    };
  },
  methods: {
    handleopen() {
      this.x = 0;
    },
    handleChangeX(value) {
      this.$emit("handleChangeX", value);
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
  width: 490px;
  border-radius: 10px;

  .el-dialog__header {
    display: none !important;
  }
  .el-dialog__footer {
    display: none !important;
  }

  .el-dialog__body {
    border: none;

    .picture {
      position: relative;

      .small {
        position: absolute;
      }
    }

    .button {
      p {
        text-align: center;
      }
      .el-slider {
        .el-slider__runway {
          width: auto;
          margin: 16px 20px;
          height: 40px !important;
          border-radius: 20px;
          .el-slider__bar {
            height: 40px !important;
            border-radius: 20px;
          }
          .el-slider__button-wrapper {
            width: 69px;
            height: 69px;

            .el-slider__button {
              width: 50px;
              height: 50px;
            }
          }
        }
      }
    }
  }
}
</style>
